import { MenuTypes } from './mainNavBar';

import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { logoutRequest } from '../redux/logoutReducer';
import { confirmDialog } from './dialog';
import { IconExport, SVGIcon } from './svg/svgIcon';

interface Props {
  menu: MenuTypes[];
  current?: string;
  onChange: (menu?: MenuTypes) => void;
}

export default function NavBar({ menu, current, onChange }: Props) {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  // 用户信息下拉菜单点击
  async function handleLogout() {
    let modalRes = await confirmDialog({ content: '确定要退出登录吗?' });
    if (modalRes !== 1) return;
    onChange();
    dispatch(logoutRequest());
    navigate('/login', { replace: true });
  }

  return (
    <div className="nav-bar">
      <div className="mt-20 d-flex-r ai-center  cursor-pointer">
        <img className="pic-logo" src="/pic/icon_logo.png" alt="" />
        <div className="font-20 text-white-color font-widget-600">海量</div>
      </div>
      <div className="flex-1 scroll-bar-h-none nav-menu-block">
        {menu.map((item) => {
          return (
            <div
              className={`nav-menu-item ${current === item.key ? 'active' : ''}`}
              key={item.label}
              onClick={() => onChange(item)}
            >
              <SVGIcon type={item.icon} className="font-16 mr-5" />
              <div className="font-14 flex-1">{item.label}</div>
            </div>
          );
        })}
      </div>
      <div className="logout-btn" onClick={handleLogout}>
        <IconExport className="font-20 mr-5" />
        退出
      </div>
    </div>
  );
}
